<template>
<div class="login_centainer" :style="bag">
    <div class="logo_center">
        <div class="center_left">
            <img src="@assets/images/login/qx_logo.png">
            <span>{{title}}</span>
        </div>
        <el-form
        class="center_right"
        :model="loginform"
        :rules="loginformrules"
        ref="loginformref">
          <img class="right_title" src="@assets/images/login/logo_name.png">

          <el-form-item prop="username">
              <el-input
              v-model="loginform.username"
              prefix-icon="fa fa-user"
              placeholder="请输入用户名"></el-input>
          </el-form-item>

          <el-form-item prop="password">
              <el-input
              type="password"
              v-model="loginform.password"
              prefix-icon="fa fa-unlock-alt"
              placeholder="请输入密码"></el-input>
          </el-form-item>

          <div class="Verification-code-box">
            <el-input
              v-model.trim="VerifyCode"
              :autofocus="true"
              placeholder="请输入验证码"
              prefix-icon="fa fa-check-square"
            />
            <Verify class="Verify_content" ref="Verify"
            :default-num="4"
            :code-length="4"
            :check-num="4"
            :type="1"
            @success="succMessage('success')"
            @error="errMessage('error')" />
          </div>

          <el-form-item class="right_jz">
              <el-button type="primary" @click="loginIn()">登录</el-button>
              <el-button type="warning" @click="resetLoginForm()">重置</el-button>
          </el-form-item>
        </el-form>
    </div>
    <div class="logo_bottom">
        <span>重庆天气在线科技有限公司  技术支持</span><p>***气象局   版权所有     Copyright@2018 HaiNan Meteorological Bureau</p>
    </div>
</div>
</template>
<script>
import Verify from './components/Verify'
import urlimg from '@assets/images/login/login_bg1.jpg'
export default {
  components: {
    Verify
  },
  data () {
    return {
      title: '公用登录界面',
      bag: {
        backgroundImage: 'url(' + urlimg + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover'
      },
      urlimg: urlimg,
      // 这是登录表单的数据绑定
      loginform: {
        username: 'admin',
        password: '123456'
      },
      VerifyCode: '', // 验证码
      VerifyCodeResults: '', // 验证结果
      // 这是表单验证规则对象
      loginformrules: {
        // 验证用户名是否合法cm
        username: [{
          required: true,
          message: '请输入登录名称',
          trigger: 'blur'
        },
        {
          min: 3,
          max: 10,
          message: '长度在 3 到 10 个字符',
          trigger: 'blur'
        }
        ],
        // 验证密码是否合法
        password: [{
          required: true,
          message: '请输入登录密码',
          trigger: 'blur'
        },
        {
          min: 6,
          max: 15,
          message: '长度在6到15个字符',
          trigger: 'blur'
        }
        ]
      }
    }
  },
  methods: {
    // 验证码正确的回调
    succMessage (val) {
      this.VerifyCodeResults = val
    },
    // 验证码错误的回调
    errMessage (val) {
      this.VerifyCode = ''
      this.VerifyCodeResults = val
    },
    // 点击重置按钮，重置登录表单
    resetLoginForm () {
      // console.log(this)
      this.$refs.loginformref.resetFields()
    },
    // 登录验证
    loginIn () {
      this.$refs.loginformref.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        if (!this.VerifyCode) {
          this.$message({
            message: '请输入验证码',
            type: 'warning'
          })
        } else {
          this.$refs.Verify.checkCode(this.VerifyCode)
          if (this.VerifyCodeResults === 'success') {
            this.$http.post('/login', this.loginform)
              .then((res) => {
                console.log(res.data)
                if (res.data.meta.status !== 200) {
                  return this.$message.error(res.data.meta.msg)
                } else {
                  console.log(res)
                  this.$message.success(res.data.meta.msg)
                  window.sessionStorage.setItem('token', res.data.data.token)
                  window.localStorage.setItem('username', res.data.data.username)
                  this.$router.push('./home')
                }
              })
              .catch((error) => {
                console.log(error)
              })
          } else {
            this.$message({
              message: '验证码错误,请重新输入',
              type: 'error'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped="scoped">
.login_centainer{
  height: 100vh;
  width: 100%;
}
.logo_top{
  width: 100%;
  height: 13vh;
  float: left;
  img{
    width: 42vw;
    float: left;
    height: auto;
    margin: 2.5vh;
  }
}
.logo_center{
  width:50%;
  padding:0 25%;
  float: left;
  height: 56vh;
  margin-top: 6vh;
  .center_left{
    width: 100%;
    margin:0;
    float: left;
    height: auto;
    text-align: center;
    img{
      display: inline-block;
      width: 136px;
      height: auto;
    }
    span{
      width: 100%;
      height: 60px;
      font-size: 60px;
      line-height: 60px;
      display: inline-block;
      margin:40px 0;
      letter-spacing: 3px;
      color: #fff;
      text-shadow: 0 0 10px #00384a;
    }
  }
  .center_right{
    width:36%;
    height: auto;
    float: left;
    background: #fff;
    border-radius: 5px;
    margin:0 27%;
    padding:0 5%;
    margin-top: 5vh;
    text-align: center;
    .right_title{
      width: auto;
      height: 30px;
      line-height: 30px;
      display: inline-block;
      text-align: center;
      margin:2vh 0;
      font-size: 26px;
      color: #715513;
    }
    ul li{
      width: 86%;
      float: left;
      height: 40px;
      margin-bottom: 10px;
      position: relative;
      padding:10px 7%;
      cursor: pointer;
      .right_img{
        width: 20px;
        height: auto;
        position: absolute;
        top: 20px;
        left: 40px;
      }
      input{
        width: 100%;
        float: left;
        height: 40px;
        border:1px solid #e7e5e4;
        border-radius: 6px;
        box-shadow:inset 0px 0px 5px 0px rgba(0,0,0,0.1);
        padding-left: 40px;
        font-size: 16px;
        color: #434343;
        background: #fff;
      }
      input:focus{
        border: 1px solid #6ca3e9;
        box-shadow:inset 0px 0px 5px 0px rgba(108,163,233,0.3);
      }
    }
  }
}
.Verification-code-box{
  width: 100%;
  display: inline-block;
  margin-bottom: 22px;
  .el-input{
    width: calc(100% - 122px);
    float: left;
  }
  .Verify_content{
    width: 102px;
    margin-left:20px;
    float: left;
  }
}

.logo_center .center_bottom{
  width: 70%;
  height: 58px;
  float: left;
  padding:10% 15%;
}

.center_bottom ul li{
  width: 15%;
  margin:0 5%;
  float: left;
  height: 58px;
  background: rgba(189,196,199,0.1);
  border-top-left-radius: 30px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 10px;
  cursor: pointer;
}
.center_bottom ul li img{
  width: 58px;
  height: auto;
  float: left;
}
.center_bottom ul li span{
  width: auto;
  height: 58px;
  float: left;
  color: #434343;
  line-height: 58px;
  padding-left: 12px;
  font-size: 22px;
}

.logo_bottom{
  width: 100%;
  height: 60px;
  padding:20px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  span{
    font-size: 14px;
    line-height: 30px;
    color: #fff;
    width: 100%;
    display: block;
    text-align: center;
    text-shadow: 1px 1px 1px #666;
  }
  p{
    font-size: 14px;
    line-height: 30px;
    color: #fff;
    width: 100%;
    display: block;
    text-align: center;
    text-shadow: 1px 1px 1px #666;
  }
}
</style>
